<template>
  <div class="code-box-demo">
    <CloudSlider :default-value="30" @change="onChange" @afterChange="onAfterChange"></CloudSlider>
    <CloudSlider
      range
      :step="10"
      :default-value="[20, 50]"
      @change="onChange"
      @afterChange="onAfterChange"
    >
    </CloudSlider>
  </div>
</template>

<script>
  export default {
    title: '3.事件',
    subTitle: '当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入。',
    data () {
      return {
        disabled: false,
      }
    },
    methods: {
      onChange (value) {
        console.log('change: ', value);
      },
      onAfterChange (value) {
        console.log('afterChange: ', value);
      },
    }
  }
</script>

<style lang="scss">
  .code-box-demo .ant-slider {
    margin-bottom: 16px;
  }
</style>